<template>
  <div>
    <el-button @click="toRole">跳转角色页面</el-button>
    <el-input v-model="msg" />
    <div>{{ msg }}</div>
    <el-input v-model="count" />
    <div>{{ count }}</div>
    <div>{{ douCount }}</div>
    <h1>{{ zname }}</h1>
    <h1>{{ zage }}</h1>
    <h1>state:{{ $store.state.count }}</h1>
    <h1>getters:{{ $store.getters.douCount }}</h1>
    <hr>
    <!-- 用v-bind完成 父传子 简写: -->
    <!-- 子传父 通过自定义事件 传值 -->
    <childOne :zicount="count" :zicolor="color" @getName="getData" />
    <hr>
    <childTwo />
  </div>
</template>
<script>
// 导入子组件
import childOne from './childOne.vue'
import childTwo from './childTwo.vue'
export default {
  components: { childOne, childTwo }, // 将子组件注册一下
  data() {
    return {
      msg: '',
      count: 8,
      color: '红色',
      obj: { name: 1, age: 2 },
      list: [{ name: '李', age: 18 }, { name: '王', age: 18 }],
      zname: '',
      zage: ''
    }
  },

  computed: { // 后台返回的数据格式 不能直接渲染 需要处理等 都在计算属性处理
    // 处理data的数据 计算属性有自身的依赖缓存 只有data数据变化了 才会从新计算
    // 后台返回数据 格式 提前处理好 在去渲染
    douCount() {
      return this.count * 2
    },
    listName() {
      return this.list.map(item => {
        return {
          ...item,
          name: item.name + '三'
        }
      })
    }
  },
  watch: { // 侦听器 监听data的变化  也可以监听路由的变化 props 父组件传来的值的变化
    //  watch内部可以执行异步操作
    msg(newVal, oldVal) {
      console.log(newVal, oldVal, '分别是新的值和旧的值')
    },
    // 深度监听的写法
    obj: {
      handler(newVal, oldVal) { // 接受新的值和旧的值
      },
      deep: true, // 开启深度监听
      immediate: true// 开启立即执行 进入页面就监听一次
    }
  },
  beforeCreate() {
    console.log('组件创建前')
  },
  created() {
    console.log('组件创建后')
  },
  beforeMount() {
    console.log('组件挂载前')
  },
  mounted() {
    console.log('组件挂载后')
  },
  beforeUpdate() {
    console.log('组件更新前')
  },
  updated() {
    console.log('组件更新后')
  },
  beforeDestroy() {
    console.log('组件销毁前')
  },
  destroyed() {
    console.log('组件销毁后')
  },
  methods: {
    toRole() { // 跳转角色页
      // vue路由跳转 主要使用name 或path跳
      // this.$router.push('/role/index') // path跳转 不传参
      // this.$router.push({ path: '/role/index' })

      // 使用name跳转
      // this.$router.push({ name: 'Role' })
    },
    getData(name, age) {
      // 自定义事件触发的函数 的形参 就是子组件传来的数据
      this.zname = name
      this.zage = age
    }
  }
}
</script>
<style lang="scss">

</style>
